<template>
  <v-layout row wrap>
    <v-flex xs12 sm12 md10 offset-md1>
      <v-dialog v-model="dialog" max-width="500px">
        <v-btn large color="primary" dark slot="activator" class="mb-2">NEW</v-btn>
        <v-card>
          <v-card-title>
            <span class="headline">{{ formTitle }}</span>
          </v-card-title>
          <v-card-text>
            <v-container grid-list-md >
              <v-layout wrap>
                <v-flex xs12 sm12 md12>
                  <v-text-field label="标题" v-model="editedItem.title"></v-text-field>
                </v-flex>
                <v-flex xs12 sm12 md12>
                  <v-text-field label="描述" v-model="editedItem.description" multi-line></v-text-field>
                </v-flex>
              </v-layout>
            </v-container>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="blue darken-1" flat @click.native="close">取消</v-btn>
            <v-btn color="blue darken-1" flat @click.native="save">保存</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
      <v-data-table
        :headers="headers"
        :items="items"
        hide-actions
        class="elevation-1"
      >
        <template slot="items" slot-scope="props">
          <td class="text-xl-left">{{ props.item.id }}</td>
          <td class="text-xl-left">{{ props.item.title }}</td>
          <td class="text-xl-left">{{ props.item.description }}</td>
          <td class="justify-right layout px-0">
            <v-btn icon class="mx-0" @click="editItem(props.item)">
              <v-icon color="teal">edit</v-icon>
            </v-btn>
            <v-btn icon class="mx-0" @click="deleteItem(props.item)">
              <v-icon color="pink">delete</v-icon>
            </v-btn>
          </td>
        </template>
      </v-data-table>
    </v-flex>
  </v-layout>
</template>

<script>
import axios from '@/helpers/http'
export default {
  data: () => ({
    dialog: false,

    headers: [
      {
        text: 'ID',
        sortable: false,
        value: 'id'
      },
      { text: '标题', value: 'title' },
      { text: '描述', value: 'description', sortable: false },
      { text: '操作', value: 'id', sortable: false }
    ],

    items: [],

    editedIndex: -1,

    editedItem: {
      title: '',
      description: ''
    },

    defaultItem: {
      title: '',
      description: ''
    }
  }),

  computed: {
    formTitle () {
      return this.editedIndex === -1 ? '新建分类' : '编辑分类'
    }
  },

  watch: {
    dialog (val) {
      val || this.close()
    }
  },

  created () {
    return axios.get('/api/v2/categories').then(response => {
      this.items = response.data.data.categories
    })
  },

  methods: {

    editItem (item) {
      this.editedIndex = this.items.indexOf(item)
      this.editedItem = Object.assign({}, item)
      this.dialog = true
    },

    deleteItem (item) {
      const index = this.items.indexOf(item)
      if (confirm('请确认删除此分类?')) {
        return axios.post('/api/v2/categories/' + item.id + '/destroy').then(response => {
          this.items.splice(index, 1)
        })
      }
    },

    close () {
      this.dialog = false
      setTimeout(() => {
        this.editedItem = Object.assign({}, this.defaultItem)
        this.editedIndex = -1
      }, 300)
    },

    save () {
      let formData = {
        title: this.editedItem.title,
        description: this.editedItem.description
      }
      if (this.editedIndex > -1) {
        return axios.post('/api/v2/categories/' + this.editedItem.id + '/update', formData).then(response => {
          Object.assign(this.items[this.editedIndex], this.editedItem)
          this.close()
        })
      } else {
        return axios.post('/api/v2/categories', formData).then(response => {
          this.items.push(response.data.data.category)
          this.close()
        })
      }
    }

  }
}
</script>

<style>
  table.table thead tr th {
    font-size: 1.5rem;
  }
  table.table tbody tr td {
    font-size: 1.2rem;
  }
</style>
